<template>
  <div class="login-container">
    <div class="login-time">
      {{ time }}
    </div>
    <div class="login-wrapper">
      <div class="login-left animate__animated animate__fadeInLeft">
        <img class="img" src="/img/logo.png" alt="">
        <p class="title">{{ $t('login.info') }}</p>
      </div>
      <div class="login-border animate__animated animate__fadeInRight">
        <div class="login-main">
          <p class="login-title">
            {{ $t('login.title') }}{{ websiteComputed.title }}
            <top-lang></top-lang>
          </p>
          <userLogin v-if="activeName==='user'"></userLogin>
          <codeLogin v-else-if="activeName==='code'"></codeLogin>
          <faceLogin v-else-if="activeName==='face'"></faceLogin>
          <div class="login-menu">
            <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
            <a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>
            <a href="#" @click.stop="activeName='face'">{{ $t('login.faceLogin') }}</a>
          </div>
          <thirdLogin></thirdLogin>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import userLogin from "./userlogin.vue";
import codeLogin from "./codelogin.vue";
import thirdLogin from "./thirdlogin.vue";
import faceLogin from "./facelogin.vue";
import topLang from "/src/page/index/top/top-lang.vue";
import website from "@/config/website.js";
import {validatenull} from "/src/utils/validate.js";
import {useRouter, useRoute} from 'vue-router'
import {getCurrentInstance} from "vue"
import {ElLoading} from 'element-plus'

const cxt = getCurrentInstance()

defineOptions({
  name: "login",
})

const websiteComputed = computed(() => {
  return website
})

const time = ref("")
const activeName = ref("user")

const router = useRouter()
const route = useRoute()
watch(route, (route) => {
  console.log("route", route)
  const params = route.query;
  let socialForm = params
  if (!validatenull(socialForm.state)) {
    const loading = ElLoading.service({
      lock: true,
      text: `${socialForm.state === "WX" ? "微信" : "QQ"
      }登录中,请稍后。。。`,
      spinner: "el-icon-loading"
    });
    setTimeout(() => {
      loading.close();
    }, 2000);
  }
})

function created() {
  getTime();
  setInterval(() => {
    getTime();
  }, 1000);
}

created();


function getTime() {
  const dayjs = cxt.appContext.config.globalProperties.$dayjs
  time.value = dayjs().format('YYYY年MM月DD日 HH:mm:ss')
}
</script>